<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加保洁员信息</title>
    <!--bootstrap js样式-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
    <!--1.bootstrap css样式-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <!--2.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--3.jquery 插件-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <!--<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">-->


    <link type="text/css" rel="stylesheet" href="../layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="../layui-v2.5.7/layui/layui.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" style="border: #0C0C0C solid 1px;">
            <form class="layui-form">
                <h3>上传头像</h3>
                <div class="layui-upload">
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" style="width: 130px; height: 130px; border: #0C0C0C solid 1px;">
                            <img class="layui-upload-img" id="demo1" style="width: 125px; height: 125px;">
                        </div>
                    </blockquote>
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                </div>

                <div style="margin-top: 50px;">
                    <div class="form-group">
                        <label>姓名</label>
                        <input id="name" type="text" class="form-control" name="username" />
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <select id="sex" name="interest" lay-filter="aihao">
                                <option value="女">女</option>
                                <option value="男" selected="">男</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>年龄</label>
                        <input id="age" type="text" class="form-control" name="age" />
                    </div>
                    <div class="form-group">
                        <label>电话号码</label>
                        <input id="telephoneNumber" type="text" class="form-control" name="phoneNumber" />
                    </div>
                    <div class="form-group">
                        <label>信息简介</label>
                        <textarea id="synopsis" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <button id="submitBtn" type="submit" name="submit" class="btn btn-primary">提交</button>
                        <input id="reset" type="reset" value="重置" class="btn btn-primary">&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="cleanerInformationManage.html">退出</a>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    $(function (){
        $("#reset") .click(function (){
            $("#demo1").attr("src"," ")
        })
    });
</script>

<!--图片上传-->
<script>
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var $ = layui.jquery
            , upload = layui.upload;
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        /* http://localhost:8080/cleanerInformation/controller/CleanerImagesController*/
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'http://localhost:8080/cleanerInformation/controller/CleanerImagesController' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传成功
                if(res.code === 200){
                    return layer.msg('上传成功');
                }
            }
        });

    });
</script>

<script>
    $(function () {
        $('form').bootstrapValidator({
            fields: {
                username: {
                    message: '姓名验证失败',
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        },
                    }
                },
                age: {
                    message: '年龄验证失败',
                    validators: {
                        notEmpty: {
                            message: '年龄不能为空'
                        },
                        numeric: {
                            message: '请填写数字'
                        }
                    }
                },
                phoneNumber: {
                    message: '电话号验证失败',
                    validators: {
                        notEmpty: {
                            message: '电话号不能为空'
                        },
                        regexp: {  //正则验证
                            regexp: /^1\d{10}$/,
                            message: '请输入正确的电话号'
                        }
                    }
                },
            }
        });

        //点击提交按钮上传json数据
        $("#submitBtn").click(function (){
            let cleaner = {
                //获取要上传的数据的对应标签的值
                name:$("#name").val(),
                sex:$("#sex").val(),
                age:$("#age").val(),
                telephoneNumber:$("#telephoneNumber").val(),
                synopsis:$("#synopsis").val()
            }
            $.ajax({
                //请求的url地址
                url: "http://localhost:8080/cleanerInformation/controller/CleanerInsertController",
                //要求服务器响应的数据格式
                dataType: "json",
                //请求是否为异步,  true为异步,   false为同步
                async: true,
                //发送请求给服务器所携带的数据
                data:{
                    message:JSON.stringify(cleaner)
                },
                //设置请求方式
                type:"POST",
                //请求成功的处理
                success:function (result){
                    //如果响应的状态码为200证明添加数据的请求成功
                    if(result.status === 200){
                        alert("添加成功")
                    }else{
                        alert("添加失败")
                    }
                }
            });
        })
    });
</script>
</body>
</html>